<template>
  <div class="Onliedevicedetail">
    <section class="toolTop">
      <el-form :inline="true" class="demo-form-inline">
        <el-row :gutter="35" class="inwrap">
          <el-col :span="4">
            <el-form-item class="title">
              <router-link to="/Onlinedevicelist" class="link">
                <i></i>返回
              </router-link>
            </el-form-item>
          </el-col>
          <el-col :span="20"></el-col>
        </el-row>
      </el-form>
    </section>
    <section class="main">
      <el-row :gutter="24">
        <el-col :span="24">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span class="title">设备详细</span>
            </div>
            <div class="text item">
              <ul class="common">
                <template v-for="(value,key,index) in list">
                  <li>{{key + " :"}} {{value}}</li>
                </template>
              </ul>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script type="text/javascript" src="../../../api/devicemg/subonlinedevice/onliedevicedetail.js"></script>

<style lang="scss">
.Onliedevicedetail {
  flex: 1;
  > section {
    &.toolTop {
      height: auto !important;
      padding-bottom: 17px;
      .el-form {
        .el-form-item {
          .link {
            height: 30px;
            border: 1px solid #9da4af;
            color: #9da4af;
            padding: 5px;
          }
        }
      }
    }
    &.main {
      .el-card {
        border-radius: 5px;
        background-color: #1f2548;
        border: 1px solid #1f2548;
        .el-card__header {
          border-bottom: 1px solid #4b506c;
          .title {
            margin-top: 0%;
            margin-left: 0%;
            font-size: 2rem;
            color: #9da4af;
            font-weight: 500;
            justify-content: center;
            align-items: center;
          }
        }
        .el-card__body {
          .text {
            color: #9da4af;
            ul {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              flex-flow: wrap;
              li {
                margin-left: 5px;
                width: 20%;
                padding-top: 1%;
              }
            }
            .special {
              margin-top: 2%;
            }
          }
        }
      }
    }
  }
}
</style>
